<template>
  <el-cascader
    v-model="data"
    :size="size"
    :options="options"
    :clearable="clearable"
    :placeholder="placeholder"
    :show-all-levels="showAllLevels"
    :filterable="filterable"
    :collapse-tags="collapseTags"
    :props="{ 
      value: outputValue,
      label: 'name',
      multiple: multiple, 
      checkStrictly: checkStrictly 
    }"
    @change="handleChange">
  </el-cascader>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'selectArea',
  props:{
    value: {          // 绑定值
      type: Array,
      default: []
    },
    placeholder: {    // 默认提示语
      type: String,
      default: '请选择地区'
    },
    selectGrade: {    // 可选择地区级别： 1: 省 2: 省市 3: 省市区
      type: Number,
      default: 3
    },
    outputValue: {    // 选择输出值的类型： code: 地区code码  name: 地区名称
      type: String,
      default: 'code'
    },
    showAllLevels: {  // 选择框中显示选中标签项  true: 显示全部标签 false: 只显示最后一级
      type: Boolean,
      default: true
    },
    clearable: {      // 是否显示清除选择框按钮
      type: Boolean,
      default: false
    },
    filterable: {     // 是否可以搜索
      type: Boolean,
      default: false
    },
    multiple: {       // 是否可以多选
      type: Boolean,
      default: false
    },
    collapseTags: {   // 是否折叠选中项
      type: Boolean,
      default: false
    },
    checkStrictly: {  // 是否可以选中任意一级
      type: Boolean,
      default: false
    },
    size: {           // 组件大小
      type: String,
      default: ''
    },
  },
  data() {
    return {
      data: this.value,
      options: []
    };
  },
  created() {
    this.getAreaData()
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value);
      this.$emit('change', value);
    },
    getAreaData() {
      request({
        url: '/system/area/list',
        method: 'get',
        params: {}
      }).then(res => {
        if (res.code == 200) {
          this.options = res.data
          if(this.selectGrade == 1) {
            this.options.forEach(item => {
              delete item.children
            })
          }
          if(this.selectGrade == 2) {
            this.options.forEach(item => {
              item.children.forEach(childItem => {
                delete childItem.children
              })
            })
          }
        }
      })
    },
  },
};
</script>